<template>
  <div id="lsd">
    <div class="appRef" ref="appRef">
      <Header/>
      <div class="cont flex mt-5">
        <Control ref="childControl"/>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="提示" width="30%" modal-class="my_modal"
             :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <div v-if="names.length > 0" style="line-height: 30px;">
      <el-text type="warning">
        <el-icon><WarningFilled /></el-icon>
        患者<b v-for="(val, index) in names">{{val + (index == names.length-1 ? "" : "、")}}</b>未正确使用体温传感器！
      </el-text>
    </div>
    <div v-if="usedNames.length > 0" style="line-height: 30px;">
      <el-text type="danger">
        <el-icon><CircleCloseFilled /></el-icon>
        患者<b v-for="(val, index) in usedNames">{{val + (index == usedNames.length-1 ? "" : "、")}}</b>使用的体温传感器已被其他患者使用！
      </el-text>
    </div>
    <div v-if="expNames.length > 0" style="line-height: 30px;">
      <el-text type="danger">
        <el-icon><CircleCloseFilled /></el-icon>
        患者<b v-for="(val, index) in expNames">{{val + (index == expNames.length-1 ? "" : "、")}}</b>使用的体温传感器已失效！
      </el-text>
    </div>
    <div v-if="invalidNames.length > 0" style="line-height: 30px;">
      <el-text type="danger">
        <el-icon><CircleCloseFilled /></el-icon>
        患者<b v-for="(val, index) in invalidNames">{{val + (index == invalidNames.length-1 ? "" : "、")}}</b>使用的体温传感器无效或不合法！
      </el-text>
    </div>
    <div v-if="outOfAreaNames.length > 0" style="line-height: 30px;">
      <el-text type="danger">
        <el-icon><CircleCloseFilled /></el-icon>
        患者<b v-for="(val, index) in outOfAreaNames">{{val + (index == outOfAreaNames.length-1 ? "" : "、")}}</b>体温传感器不在可使用的地区范围！
      </el-text>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"> 确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import useDraw from '@/hooks/web/useDraw'
import {onMounted, onUnmounted, ref} from 'vue'
import Header from './components/header.vue'
import Control from './components/control.vue'
import {getUsage} from '@/api/eq'
import {CircleCloseFilled, WarningFilled} from "@element-plus/icons-vue";
// * 适配处理
const {appRef, calcRate, windowDraw, unWindowDraw} = useDraw()
// 生命周期
onMounted(() => {
  // todo 屏幕适应
  windowDraw()
  calcRate()
})

onUnmounted(() => {
  unWindowDraw()
})
// const childControl = ref()
// const openDrawer = (() => {
//     childControl.value.drawer.value = true
// })

/** 提示患者未正确使用体温传感器相关代码  开始 */
const dialogVisible = ref(false);
const names: any = ref([]);
const usedNames: any = ref([]);
const expNames: any = ref([]);
const invalidNames: any = ref([]);
const outOfAreaNames: any = ref([]);
const getNoUsageNames = () => {
  getUsage().then((res: any) => {
    dialogVisible.value = false;
    let data = res.data;
    // 未使用体温传感器的患者
    let noTemperatureData = data?.noTemperatureData || [];
    if (noTemperatureData.length > 0) {
      let str = [];
      for (let i = 0; i < noTemperatureData.length; i++) {
        str.push(noTemperatureData[i].patientName);
      }
      dialogVisible.value = true;
      names.value = str;
    } else {
      names.value = [];
    }

    // 使用已被使用过的传感器的患者列表
    let sensorUsed = data?.sensorUsed || [];
    if (sensorUsed.length > 0) {
      let str = [];
      for (let i = 0; i < sensorUsed.length; i++) {
        str.push(sensorUsed[i].patientName);
      }
      dialogVisible.value = true;
      usedNames.value = str;
    } else {
      usedNames.value = [];
    }

    // 使用已失效的传感器的患者列表
    let sensorExp = data?.sensorExp || [];
    if (sensorExp.length > 0) {
      let str = [];
      for (let i = 0; i < sensorExp.length; i++) {
        str.push(sensorExp[i].patientName);
      }
      dialogVisible.value = true;
      expNames.value = str;
    } else {
      expNames.value = [];
    }

    // 使用不合法的传感器的患者列表
    let sensorInvalid = data?.sensorInvalid || [];
    if (sensorInvalid.length > 0) {
      let str = [];
      for (let i = 0; i < sensorInvalid.length; i++) {
        str.push(sensorInvalid[i].patientName);
      }
      dialogVisible.value = true;
      invalidNames.value = str;
    } else {
      invalidNames.value = [];
    }

    // 超出使用范围的传感器的患者列表
    let sensorOutOfArea = data?.sensorOutOfArea || [];
    if (sensorOutOfArea.length > 0) {
      let str = [];
      for (let i = 0; i < sensorOutOfArea.length; i++) {
        str.push(sensorOutOfArea[i].patientName);
      }
      dialogVisible.value = true;
      outOfAreaNames.value = str;
    } else {
      outOfAreaNames.value = [];
    }
  });
}
getNoUsageNames();
// 设置一个每60秒执行一次的定时器
setInterval(function () {
  getNoUsageNames();
}, 60 * 1000);
/** 提示患者未正确使用体温传感器相关代码  结束 */

</script>

<style scoped lang="less">
#lsd {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/imgs/lsd-bj.png');
  background-size: cover;
  background-position: center center;
  background-color: #000;
}

.appRef {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;

  .cont {
    padding: 0 20px;
    box-sizing: border-box;
  }
}

#left_side_btn {
  padding-top: 45px;
  width: 10px;
  height: 100px;
  position: absolute;
  top: 40%;
  background-color: #000;
  z-index: 9999;
  border: 1px solid #00a991;
  border-radius: 5px;
}
</style>
<style>
.my_modal {
  background-color: rgba(0, 0, 0, 0.9);
}
</style>
